<template>
	<view class="login">
		<view class="top">

		</view>
		<!-- <uni-icons type="left" size="27" class="login-icon"></uni-icons> -->
		<view class="verify">
			<view class="text">欢迎登录</view>
			<view class="title">请输入账号密码登录</view>
		</view>
		<view class="logininput">
			<view class="logininput-container">
				<uni-icons type="contact" size="25" class="logininput-icon" color="#dddddd"></uni-icons>
				<input v-model="username" class="uni-input" focus placeholder="输入账号" />
			</view>
			<view class="logininput-container">
				<uni-icons type="locked" size="25" class="logininput-icon" color="#dddddd"></uni-icons>
				<input v-model="password" class="uni-input" placeholder="输入密码" type="password" />
			</view>
		</view>
		<!-- <view class="agreement">
			<checkbox-group class="checkbox">
				<checkbox />
				<text class="text">我已阅读 </text>
				<text class="text">用户手册 </text>
				<text class="text"> 和 </text>
				<text class="text">隐私权限</text>
			</checkbox-group>
		</view> -->
		<view class="btn" @click="HandleLogin">立即登录</view>
		<!-- <view class="register" @click="HandleRegister">
			去注册
			<uni-icons type="arrow-right" color="#E5353F" size="30" class="icon"></uni-icons>
		</view> -->
		<up-loading-page :loadingText="loadingPageData.loadingText" :image="loadingPageData.image"
			:iconSize="loadingPageData.iconSize" :loadingMode="loadingPageData.loadingMode"
			:bgColor="loadingPageData.bgColor" :loading="loading" :color="loadingPageData.color"
			:loadingColor="loadingPageData.loadingColor">
		</up-loading-page>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		UserLogin,
		getUserPower
	} from "@/api/User.js"
	import {
		setToken,
		getToken
	} from '@/utils/auth.js'
	// 用户名
	const username = ref("")
	// 密码
	const password = ref("")

	const check = ref(false)
	const loading = ref(false)
	let loadingPageData = reactive({
		loadingText: '数据加载中',
		image: '',
		loadingMode: 'spinner',
		bgColor: 'rgba(0, 0, 0, 0.3)',
		iconSize: 28,
		color: '#eee',
		loadingColor: '#ddd',
	})
	// 立即登录
	const HandleLogin = () => {
		if (!username.value) {
			uni.showToast({
				title: '请输入用户名',
				duration: 1000
			})
			return
		}
		if (!password.value) {
			uni.showToast({
				title: '请输入密码',
				duration: 1000
			})
			return
		}
		loading.value = true
		UserLogin({
			username: username.value,
			password: password.value,
			ifApp:true
		}).then(async (res) => {
			if (res && res.code == 200) {
				setToken(res.token)
				let power = await getPower()
				if (power.code == 200) {
					let roles = []
					power.user.roles.forEach(item => {
						roles.push(item.roleName)
					})
					uni.setStorageSync('roles', roles.join(','))
					loading.value = false
					uni.switchTab({
						url: '../../pages/index/index'
					})
				}
			}
		}).catch(err => {
			loading.value = false
			console.log(err);
		})
	}

	const getPower = async () => {
		let res = await getUserPower()
		return res
	}


	// 跳转到注册页面
	const HandleRegister = () => {
		uni.navigateTo({
			url: '/pages/register/register'
		})
	}
</script>

<style scoped lang="less">
	.login {
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, #E8F1FE 0%, #FFFFFF 100%);

		.top {
			width: 100%;
			height: 88rpx;
		}

		.login-icon {
			height: 88rpx;
			margin-top: 40rpx;
		}

		.verify {
			width: 100%;
			padding: 40rpx;
			height: 220rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin-top: 40rpx;

			.text {
				color: #000000;
				font-family: "PingFang SC";
				font-size: 44rpx;
				font-style: normal;
				font-weight: 700;
				line-height: normal;
				opacity: 0.9;
			}

			.title {
				color: #000000;
				font-family: "PingFang SC";
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
				opacity: 0.3;
			}


		}

		.logininput {
			height: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 80rpx;

			& .logininput-container:nth-child(1) {
				margin-bottom: 40rpx;
			}

			.logininput-container {
				width: 630rpx;
				height: 88rpx;
				background-color: #fff;
				border-radius: 49rpx 49rpx 49rpx 49rpx;
				display: flex;
				align-items: center;
				padding: 20rpx 36rpx;
				font-size: 28rpx;

				& .logininput-icon:nth-child(1) {
					margin-right: 32rpx;
				}

				.uni-input::-webkit-input-placeholder {
					color: #dddddd;
					font-family: "HarmonyOS Sans SC";
					font-size: 12rpx;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					opacity: 0.3;
				}
			}

		}

		.agreement {
			margin-top: 40rpx;

			.checkbox {
				display: flex;
				align-items: center;

				checkbox {
					margin-right: 10rpx;
				}

				.text:nth-child(even) {
					font-size: 24rpx;
					opacity: 0.5;
				}

				.text:nth-child(odd) {
					font-size: 24rpx;
					color: #E5353F;
				}

				.text:nth-child(2) {
					margin: 0 5rpx;
				}

				.text:nth-child(3) {
					margin-right: 5rpx;
				}
			}

		}

		.btn {
			color: #fff;
			height: 88rpx;
			border-radius: 44rpx;
			font-size: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 620rpx;
			background: #325EF5;
			margin: auto;
			margin-top: 200rpx;
		}

		.register {
			font-size: 35rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #E5353F;
			margin-top: 60rpx;

			.icon {
				margin-left: 5rpx;
			}
		}

	}
</style>